<template>
  <Layout>
    <Header>
      <Menu mode="horizontal" theme="dark" active-name="1">
        <div class="layout-logo">Haredot后台管理系统</div>
        <div class="layout-nav">
          <MenuItem name="1">
            <Avatar icon="ios-person"/>
            {{ $store.getters.currentUser }}
          </MenuItem>
          <Submenu name="2">
            <template #title>
              <Icon type="ios-stats"/>
              {{ currentSys.name }}
            </template>
            <template v-for="sys in sysList">
              <MenuItem :name="'2-' + sys.id" @click="changeSys(sys)">{{ sys.name }}</MenuItem>
            </template>
          </Submenu>

          <MenuItem name="3" @click="handleLogout">
            <Icon type="logo-codepen"/>
            退出登录
          </MenuItem>
        </div>
      </Menu>
    </Header>
    <div class="layout-content">
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu :active-name="activeItem" theme="light"
                width="auto" :open-names="openNames"
                ref="leftMenu" accordion>

            <Submenu :name="item.id" v-for="(item, index) in menuList" :key="item.id">
              <template #title>
                <Icon :type="item.icon" size="20"></Icon>
                {{ item.name }}
              </template>
              <MenuItem v-for="func in item.children"
                        :name="item.id + '-' + func.id"
                        :key="func.id"
                        :to="func.url">{{ func.name }}
              </MenuItem>
            </Submenu>

          </Menu>
        </Sider>
        <!-- 面包屑导航 -->
        <Layout :style="{padding: '0 24px 24px'}">
          <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem :to="{name: 'home'}">Home</BreadcrumbItem>
            <BreadcrumbItem>{{ menu.name }}</BreadcrumbItem>
            <BreadcrumbItem>{{ func.name }}</BreadcrumbItem>
          </Breadcrumb>
          <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            <router-view :key="$route.fullPath"></router-view>
          </Content>
        </Layout>
      </Layout>
    </div>
  </Layout>
</template>

<script>
export default {

  data() {
    return {
      menu: {}, // 选中的菜单
      func: {}, // 选中的功能
      activeItem: '',
      openNames: [],
      menuList: [],
    }
  },
  created() {
    this.positionMenu(this.$route);
  },
  methods: {
    changeSys(sys) {
      this.sysId = sys.id;
      // 跳转
      this.$router.push(sys.url);
    },
    handleLogout() {
      this.$store.commit("resetSys") ; // 删除当前登录的系统信息
      // 跳转到登录页面
      this.$router.push("/login?logout");
    },
    positionMenu(route) {
      // 获取对应的路径
      let path = route.fullPath;
      // 找到该路径对应的菜单和功能
      let menu = this.menuList.find(menu => {
        this.func = menu.children.find(func => func.url == path);
        return this.func != null;
      });

      if (menu == null) {
        this.func = this.menu = {};
        return;
      }
      // 将找到的菜单赋值给 响应式菜单
      this.menu = menu;
      // 激活的功能是
      this.activeItem = `${menu.id}-${this.func.id}`;
      this.openNames = [menu.id];
      // 更新 子组件 的数据
      this.$nextTick(() => {
        this.$refs.leftMenu.updateOpened();
        this.$refs.leftMenu.updateActiveName();
      })
    }
  },
  watch: {
    "$route": function (route) {
       this.positionMenu(route);
    },
    currentSys: {
      handler: function (sys) {
        // 根据系统ID , 找到 菜单
        let menus = this.$store.getters.rbacAuthorities.filter(node => node.level === 2 && node.pid === sys.id);
        this.menuList = menus.map(menu => {
          // 根据 menu 找 三级 功能
          let funcs = this.$store.getters.rbacAuthorities.filter(node => node.level === 3 && node.pid === menu.id);
          return { ...menu, children: [...funcs] }
        })
        // 更新 子组件 的数据
        this.$nextTick(() => {
          this.$refs.leftMenu.updateOpened();
          this.$refs.leftMenu.updateActiveName();
        })
      },
      immediate: true,
    }
  },
  computed: {
    sysId: {
       get() {
         if (this.$store.state.sysId != null) {
           return this.$store.state.sysId ;
         }
         return sessionStorage.getItem("sysId");
       },
       set(val) {
         this.$store.commit("changeSys", val);
       }
    },
    sysList() {
      return this.$store.getters.rbacAuthorities.filter(node => node.level === 1);
    },
    currentSys: {
      get() {
        if (this.sysList.length != 0) {
          if (this.sysId == null) return this.sysList[0];
          return this.sysList.find(sys => sys.id == this.sysId);
        }
        return {};
      },
      set(val) {
        this.sysId = val;
      }
    },

  }
}
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

.layout-content {
  position: relative;
  height: 100%;
  overflow: hidden auto;
}

.ivu-layout {
  height: 100%;
}

.layout-logo {
  float: left;
  position: relative;
  top: 15px;
  left: 0;
  line-height: 30px;
  text-align: center;
  color: #fff;
}

.layout-nav {
  width: 420px;
  margin: 0 20px 0 auto;
}

.ivu-layout-content {
  min-width: 1200px;
}
</style>
